<!doctype html>
<html>
<head>
    <title>测试</title>
    <meta charset="utf8">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <form id="form">
        <input name="file" type="file" />
        <input name="a" value="1" />
        <input value="2" />
    </form>
    <button>提交</button>
</body>
</html>
<script>
    $(function() {
        // 监听上传进度
        var xhrOnProgress = function(fun) {
            xhrOnProgress.onprogress = fun; //绑定监听
            return function() {
                //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
                var xhr = $.ajaxSettings.xhr();
                //判断监听函数是否为函数
                if (typeof xhrOnProgress.onprogress !== 'function')
                    return xhr;
                //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
                if (xhrOnProgress.onprogress && xhr.upload) {
                    xhr.upload.onprogress = xhrOnProgress.onprogress;
                }
                return xhr;
            }
        }
        //jquery不能使用带slim的版本，这个版本删去了ajax相关的功能
        $('button').on('click', function() {
            // var formData = new FormData($('#form')[0]);// 自动搜索表单信息(表单内没有name属性的input不会被搜索到)，IE<=9不支持FormData
            // formData.append('b', 3);// 还可以添加额外的表单数据
            var formData = new FormData();
            formData.append('admin_username','embeded');
            formData.append('admin_password','666777');
            formData.append('name','modbus_t1');
            formData.append('begin_date ','2023-02-10 15:04:00');
            formData.append('end_date','2023-02-13 15:52:00');
            //在url里面不能填写前面的ip地址，只能填后面的路径
            $.ajax({
                type: 'post',
                url: '/opc_ua/history_data',
                data: formData,
                contentType: false,// 当有文件要上传时，此项是必须的，否则后台无法识别文件流的起始位置(详见：#1)
                processData: false,// 是否序列化data属性，默认true(注意：false时type必须是post，详见：#2)
                xhr: xhrOnProgress(function(e){// (详见：#3)
                    var percent=e.loaded / e.total;//计算百分比
                    $('body').append('->'+ percent);
                }),
                success: function(response, request) {
                    $('body').append('完成');
                    //response的格式已经是json了，无需再转换
                    console.log(response);
                    // var parsed_data = response;
                    // console.log(parsed_data);
                    var history_data_array = response.history_data_array
                    for(var i = 0;i < history_data_array.length; i++) {
                        //打印记录的日期
                        var record_item = history_data_array[i];
                        console.log(record_item.date);
                         //打印具体的记录
                        var data_arr = record_item.record.data_array
                        //嵌套循环的时候，里面要另一个变量名作为下标
                        for(var k = 0;k < data_arr.length; k++){
                            //console.log(parseInt(data_arr[i]));
                            console.log(data_arr[k]);
                            var b = parseInt(data_arr[k]);
                            b = b+1;//检测parseInt能否正常转换字符串为数值
                            console.log(b);
                        }
                    }
                },
                dataType: "json"
            })
        })
    })
</script>